<template>
    <ConTent style="margin-top: 40px;">
        <div v-if="$store.state.username !== '管理员'" class="card">
            <div class="card-body">
                <div v-if="!admin_isalive" class="row justify-content-md-center" style="color:red">
                    Chat(管理员不在聊天页面,请勿发送消息)
                </div>
                <div v-else class="row justify-content-md-center">
                    Chat(管理员正处于聊天页面)
                </div>
            </div>
        </div>

        <div v-else class="card">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    Chat
                </div>
            </div>
        </div>

        <div class="card" style="height:350px; overflow-y: auto;">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div v-html="content"></div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <textarea v-model="text"></textarea>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row justify-content-md-center">
                    <div class="col-3"></div>
                    <div class="col-3"></div>
                    <div class="col-3" style="color:red;">{{ error_message }}</div>
                    <div class="col-2"></div>
                    <div class="col" style="float:right;"><button @click="send" ktype="submit"
                            class="btn btn-primary">发送</button></div>

                </div>
            </div>
        </div>
        <!-- 
      <div class="card">
        <div class="card-body">
            <div class="row justify-content-md-center">
                <div class="col-3"></div>
                <div class="col-3"></div>
                <div class="col-3"></div>
                <div class="col-2"></div>
                <div class="col" style="float:right;">
                
                </div>
                    
            </div>
        </div>
      </div> -->
    </ConTent>
</template>

<script>
import ConTent from '@/components/ConTent';
//import router from '@/router/index';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { onBeforeUnmount } from 'vue';
export default {
    components: {
        ConTent,
    },

    setup() {
        //    let _this=this;
        let store = useStore();
        let route = useRoute();
        let content = ref("");
        let text = ref("");
        let error_message = ref("");
        let allusers = ref([]);
        let admin_isalive = ref(false);
        //let message=ref([]);
        //let message=ref([]);
        let username = route.params.username;
        const socketurl = "ws://8.134.248.229:10085/imserver/" + store.state.username;
        let socket = new WebSocket(socketurl);
        socket.onopen = function () {
            console.log("Connect");
        };
        socket.onmessage = function (msg) {
            let data = JSON.parse(msg.data);
            //console.log(data.users);
            if (data.users) {
                admin_isalive.value = false;
                allusers.value = data.users.filter(user => user.username !== store.state.username);
                for (let i in allusers.value) {
                    if (allusers.value[i].username === '管理员')
                        admin_isalive.value = true;
                }
            } else {
                if (data.from === username) {
                    let html = '<div class="container text-center"><div class="row">' + data.from + '  ' + '<div class="col">' + '<button type="" class="btn btn-primary  disabled" data-bs-toggle="modal" data-bs-target="#exampleModal">' + data.text + '</button></div><div class="col"></div><div class="col"></div><div class="col"></div></div><div class="row" style="height:10px;"></div></div>';
                    content.value += html;
                }
                else {
                    error_message.value = '用户' + data.from + '发来消息：' + data.text;
                }
            }
        };

        socket.onerror = function () {
            console.log("ERROR");
        };

        socket.onclose = function () {
            console.log("断开连接");
        };

        const send = () => {

            let flag = false;
            error_message.value = "";
            for (let i in allusers.value) {
                if (allusers.value[i].username === username) {
                    flag = true;
                }
            }
            //style="background-color:#E5E5E5;border-radius: 20%;"
            // let html='<div class="row">'+text.value+'</div>';

            if (flag) {
                let html = '<div class="container text-center"><div class="row"><div class="col"></div><div class="col"></div><div class="col"></div><div class="col">' + '<button type="button" class=" disabled btn btn-success">' + text.value + '</button>' + '</div>我</div><div class="row" style="height:10px;"></div></div>';
                content.value += html;
                let newmessage = { from: store.state.username, to: username, text: text.value };
                socket.send(JSON.stringify(newmessage));
                text.value = "";
            }
            else {
                text.value = "";
                error_message.value = "对方不在聊天页面!";
            }
        };

        onBeforeUnmount(() => {
            socket.close();
        });


        return { text, send, content, error_message, admin_isalive };
    },
}
</script>

<style scoped></style>